<template>
  <div>
    <h1>航班列表</h1>
    <table>
      <thead>
        <tr>
          <th>航班号</th>
          <th>出发城市</th>
          <th>到达城市</th>
          <th>出发时间</th>
          <th>到达时间</th>
          <th>飞行时长</th>
          <th>机长</th>
          <th>乘务员</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="flight in flights" :key="flight.flightId">
          <td>{{ flight.flightNumber }}</td>
          <td>{{ flight.departureCity }}</td>
          <td>{{ flight.arrivalCity }}</td>
          <td>{{ flight.departureTime }}</td>
          <td>{{ flight.arrivalTime }}</td>
          <td>{{ flight.flightDuration }}</td>
          <td>{{ flight.pilotName }}</td>
          <td>{{ flight.crewNames }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      flights: []
    };
  },
  created() {
    this.fetchFlights();
  },
  methods: {
    fetchFlights() {
      axios.get('/flights')
        .then(response => {
          if (response.data.code === 0) {
            this.flights = response.data.data;
          } else {
            console.error('Failed to fetch flights:', response.data.msg);
          }
        })
        .catch(error => {
          console.error('Error fetching flights:', error);
        });
    }
  }
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}
</style> 